<template>
  <div class="equipmentOption">
    <div class="equipmentOption_treeBg">
      <MetaTreeList title-size="20" title="设备" :maxWidth="300" :icon="treeIcon" :default-props="defaultProps" :tree-data="equTreeData" @treeItemChoose="roloeItemChoose"></MetaTreeList>
    </div>
    <div class="equipmentOption_infoBg">
      <div v-if="Object.keys(roleInfoItem).length > 0" class="equipmentOption_info">
        <div class="equipmentO_infoTitleBg">
          <div class="equipmentO_infoTitle">设备信息</div>
          <div class="equipmentO_infoContent">
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v4/eInfo_showName.png" class="equipmentO_infoItemIconShowName">
              <div class="equipmentO_infoItemText">设备名称&nbsp;&nbsp;{{ roleInfoItem.customizeName && roleInfoItem.customizeName !== '' ? roleInfoItem.customizeName : roleInfoItem.equipmentname }}</div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v4/eInfo_snid.png" class="equipmentO_infoItemIconSnid">
              <div class="equipmentO_infoItemText">设备版本&nbsp;&nbsp;v{{ roleInfoItem.version }} ({{ roleInfoItem.snid }})</div>
            </div>
            <div class="equipmentO_infoItemBg">
              <!-- 1在线2调试3维修4报警 -->
              <img src="@/assets/images/v4/eInfo_equipmentStatus.png" class="equipmentO_infoItemIconSnid">
              <div v-if="equipmentOnType == '2'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;调试</div>
              <div v-else-if="equipmentOnType == '3'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;维修
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
              <div v-else-if="equipmentOnType == '4'" class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;报警
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
              <div v-else class="equipmentO_infoItemText">设备状态&nbsp;&nbsp;在线 
                <span v-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '10'">（休眠唤醒中）</span>
                <span v-else-if="parseFloat(roleInfoItem.version) >= 3 && equipmentStatusNow == '20' && xmStatus == '20'">（休眠充电中）</span>
              </div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v4/eInfo_elecMain.png" class="equipmentO_infoItemIconSnid">
              <div class="equipmentO_infoItemText">设备电量&nbsp;&nbsp;{{ equipmentVoltage !== '' ? equipmentVoltage : '-' }}V
              </div>
            </div>
            <div class="equipmentO_infoItemBg">
              <img src="@/assets/images/v4/eInfo_collStatus.png" class="equipmentO_infoItemIconSnid">
              <!-- 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开 -->
              <div v-if="collectionType == '2'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;连续采集</div>
              <div v-else-if="collectionType == '3'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;样品采集</div>
              <div v-else-if="collectionType == '4'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;暗电流定标</div>
              <div v-else-if="collectionType == '5'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;标准板定标</div>
              <div v-else-if="collectionType == '7'" class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;定时采集</div>
              <div v-else class="equipmentO_infoItemText">采集状态&nbsp;&nbsp;待机</div>
            </div>
            <div v-if="collectionType == '7' && workModel == '03'" class="equipmentO_infoItemBg">
              <img src="@/assets/images/v4/eInfo_nowCollStatus.png" class="equipmentO_infoItemIconSnid">
              <div v-if="realWorkModel == '10'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;半休眠模式</div>
              <div v-else-if="realWorkModel == '20'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;全休眠模式（采集）</div>
              <div v-else-if="realWorkModel == '30'" class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;全休眠模式（待机）</div>
              <div v-else class="equipmentO_infoItemText">当前采集模式&nbsp;&nbsp;-</div>
            </div>
          </div>
        </div>
        <div class="equipmentO_optionArea">
          <div class="equipmentO_optionTitle">设备控制</div>
          <div class="equipmentO_optionBg">
            <div class="equipmentO_left">
              <img v-if="lightSource == '1'" class="equipmentOLeft_water" src="@/assets/images/v4/water_o.png">
              <img v-else class="equipmentOLeft_water" src="@/assets/images/v4/water.png">
              <img v-if="equipmentStatusNow == '10'" src="@/assets/images/v4/equipment_o.png" class="equipmentOLeft_equipment_o">
              <img v-else src="@/assets/images/v4/equipment.png" class="equipmentOLeft_equipment">
              <div class="equipmentOLeft_btnArea">
                <div class="equipmentODoCollectionBtn_item">
                  <div v-if="equipmentStatusNow == '20'" class="equipmentODoCollectionBtn_start" @click="doOption"></div>
                  <div v-else class="equipmentODoCollectionBtn_startUn"></div>
                </div>
                <div class="equipmentODoCollectionBtn_item">
                  <!-- 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开 -->
                  <div v-if="collectionType == '7'" class="equipmentODoCollectionBtn_canStop" @click="stopDsOption"></div>
                  <div v-else-if="collectionType == '2' || collectionType == '3' || collectionType == '4' || collectionType == '5'" class="equipmentODoCollectionBtn_canStop" @click="stopDcOption"></div>
                  <div v-else class="equipmentODoCollectionBtn_stop"></div>
                </div>
              </div>
            </div> 
            <div class="equipmentO_right">
              <div class="equipmentO_btnGroup">
                <el-button class="equipmentO_btn" round @click="restoreDefault()">恢复默认</el-button>
              </div>
              <div class="equipmentO_settingArea">
                <div class="equipmentO_settingItem">
                  <div class="equipmentO_settingTitle">采集控制</div>
                  <el-select v-model="btnClickType" placeholder="请选择" size="small" :disabled="equipmentStatusNow == '10'">
                    <el-option label="定时采集" value="ds"></el-option>
                    <el-option label="样品采集" value="dc"></el-option>
                  </el-select>  
                </div>
              </div>
              <div class="equipmentO_paramArea">
                <div class="equipmentO_paramTitle">设备参数
                  <i v-if="equipmentStatusNow !== '10'" class="el-icon-connection equipmentOParams_refreshIcon" @click="checkEquipmentStatus()"></i>
                </div>
                <div class="equipmentO_paramItemBg">
                  <div class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">采集条数/次</div>
                    <el-input-number size="medium" class="equipmentO_paramInputNumber" v-model="singleTimes" :disabled="equipmentStatusNow == '10'"></el-input-number>&nbsp;条
                  </div>
                  <div class="equipmentO_paramItemDouble">
                    <div class="equipmentO_paramName">采集备注</div>
                    <el-input size="medium" class="equipmentO_paramInput" maxlength="50" type="textarea" resize="none" :rows="4" placeholder="请输入备注" v-model="cjRemark" :disabled="equipmentStatusNow == '10'"></el-input>
                  </div>
                </div>
                <div class="equipmentO_paramItemBg">
                  <div class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">起始时间</div>
                    <el-date-picker class="equipmentO_paramTimeInput" v-model="startTime" type="datetime" placeholder="请选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" size="medium" :disabled="equipmentStatusNow == '10' || btnClickType !== 'ds'"></el-date-picker>
                  </div>
                  <div class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">采集间隔</div>
                    <el-input-number size="medium" class="equipmentO_paramInputNumber" v-model="interval" :min="minInterval" :disabled="equipmentStatusNow == '10' || btnClickType !== 'ds'"></el-input-number>&nbsp;分
                  </div>
                  <div class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">采集模式</div>
                    <el-select v-model="workModel" placeholder="请选择" size="medium" :disabled="equipmentStatusNow == '10' || btnClickType !== 'ds'" class="equipmentO_paramInput" @change="workModelChoose">
                      <el-option v-if="roleInfoItem.version != '2.4'" label="全休眠模式" value="02"></el-option>
                      <el-option v-if="roleInfoItem.version != '2.4' && roleInfoItem.version != '3.1'" label="半休眠模式" value="01"></el-option>
                      <el-option label="全功率模式" value="00"></el-option>
                      <el-option v-if="roleInfoItem.version != '2.4' && roleInfoItem.version != '3.1'" label="全自动模式" value="03"></el-option>
                    </el-select>  
                  </div>
                </div>
                <div class="equipmentO_paramItemBg">
                  <div class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">采集频次</div>
                    <el-select v-model="dsType" placeholder="请选择" size="medium" :disabled="equipmentStatusNow == '10' || btnClickType !== 'ds'" class="equipmentO_paramInput">
                      <el-option label="连续" value="10"></el-option>
                      <el-option label="有限" value="20"></el-option>
                    </el-select>
                  </div>
                  <div v-if="dsType == '20'" class="equipmentO_paramItem">
                    <div class="equipmentO_paramName">采集次数</div>
                    <el-input-number size="medium" class="equipmentO_paramInputNumber" v-model="cjTimes" :disabled="equipmentStatusNow == '10' || btnClickType !== 'ds'"></el-input-number>&nbsp;次
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
        <div class="equipmentO_echartsArea">
          <div class="equipmentO_echartsDndataBg">
            <div ref="dnChart" class="equipmentO_echartsDndata"></div>
          </div> 
          <div class="equipmentO_echartsReflectivityBg">
            <div ref="reflectivityChart" class="equipmentO_echartsReflectivity"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MetaTreeList from '../components/MetaTreeList'
import MetaNumberInput from '../components/MetaNumberInput'
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'equipmentOption',
  components: {
    MetaTreeList,
    MetaNumberInput
  },
  data () {
    return {
      roleInfoItem: {},
      treeIcon: require("@/assets/images/v4/equipmentTreeIcon.png"),
      ws: null,
      username: '',
      dnChart: null,
      reflectivityChart: null,
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      equTreeData: [],
      btnClickType: '',
      minInterval: 5,
      startTime: '', // 起始时间
      interval: 30,
      cjTimes: 1,
      dsType: '10', // 10 - 连续采集 ，20 - 设置采集次数
      equipmentStatusNow: '0',
      lightSource: '2', // 1开2关
      workModel: '00', //全功率模式
      realWorkModel: '',
      voltageDown: 9, //电压阈值
      voltageUp: 10, //电压阈值
      equipmentParams: {},
      equipmentParamsBefore: {},
      collectionType: 0,
      cjRemark: '',
      singleTimes: 5,
      equipmentOnType: '', //1在线2调试3维修4报警
      equipmentVoltage: '', //设备电量
      xmStatus: ''
    }
  },
  created() {
    this.initWebsocket()
  },
  mounted() {
    this.initEquipmentData()
  },
  destroyed() {
    if(this.ws) {
      this.ws.close()
      this.ws = null
    }
  },
  methods: {
    initWebsocket() {
      let _this = this
      _this.username = localStorage.getItem('username')
      if ('WebSocket' in window) {
        // 打开一个 web socket
        let ws = new WebSocket(process.env.PROGOO_SOCKET + `ws/${_this.username}`)
        _this.ws = ws
        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          _this.$message({
            message: '设备通讯连接成功',
            type: 'success'
          });
        }
        ws.onmessage = function(evt) {
          try {
            let msg = JSON.parse(evt.data)
            _this.websocketMsgHandle(msg)
          } catch (error) {
            console.log('不是个json对象')
          }
        }
        ws.onclose = function() {
          // 关闭 websocket
        }
        ws.onerror = function() {
          _this.$message.error('设备通讯连接已断开')
        }
      } else {
        // 浏览器不支持 WebSocket
        alert('您的浏览器不支持 WebSocket!')
      }
    },
    websocketMsgHandle(msg) {
      console.log(msg)
      if(msg.type === 13) {
        if(msg.fixed_type_list && msg.fixed_type_list.length > 0) {
          if(msg.fixed_type_list[0].equipmentId === this.roleInfoItem.id) {
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            if(msg.fixed_type_list[0].panel_parameters.collectionType == '2' || msg.fixed_type_list[0].panel_parameters.collectionType == '3' || msg.fixed_type_list[0].panel_parameters.collectionType == '4' || msg.fixed_type_list[0].panel_parameters.collectionType == '5' || msg.fixed_type_list[0].panel_parameters.collectionType == '7') {
              this.equipmentStatusNow = '10'
            }else {
              this.equipmentStatusNow = '20'
            }
            this.collectionType = msg.fixed_type_list[0].panel_parameters.collectionType
            this.equipmentOnType = msg.fixed_type_list[0].panel_parameters.onType
            this.xmStatus = msg.fixed_type_list[0].panel_parameters.xmStatus

            this.lightSource = msg.fixed_type_list[0].panel_parameters.light_source
            // this.btnClickType = ''
            this.realWorkModel = msg.fixed_type_list[0].panel_parameters.lastCjModelStatus
          }
        }
      }else if(msg.type === 100) {
        let showData = {}
        if(msg.equipment_type !== '2') {
          showData = msg.fixed_type_list.length > 0 ? msg.fixed_type_list[0] : {}
        }
        if(Object.keys(showData).length > 0) {
          if(showData.equipmentId === this.roleInfoItem.id) {
            for(let i in showData.dataList) {
              let selectItem = {}
              selectItem.value = showData.dataList[i].value
              selectItem.name = showData.dataList[i].name
              selectItem.xData = showData.centralWavelength
              selectItem.yData = showData.dataList[i].arr
              this.chartInit(selectItem)
            }
          }
        }
      }
    },
    initEquipmentData() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/userarea",
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          this.equTreeData = res.data.result
          let currentDataItem = {}
          for(let i in this.equTreeData) {
            this.equTreeData[i].name = "(" + this.equTreeData[i].area_jc + ")" + this.equTreeData[i].area_name
            this.equTreeData[i].level = 1
            for(let j in this.equTreeData[i].list) {
              if(this.equTreeData[i].list[j].customizeName && this.equTreeData[i].list[j].customizeName !== '') {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].customizeName
              }else {
                this.equTreeData[i].list[j].name = this.equTreeData[i].list[j].equipmentname
              }
              this.equTreeData[i].list[j].level = 2
              for(let key in this.equTreeData[i].list[j].equipmentRecord) {
                //子表中的这些参数不正确，不加入主表。
                if(key === 'aid' || key === 'id' || key === 'eid' || key === 'snid' || key === 'equipment_type') {
                  continue
                }
                this.equTreeData[i].list[j][key] = this.equTreeData[i].list[j].equipmentRecord[key]
              }
              if(Object.keys(this.roleInfoItem).length > 0 && this.roleInfoItem.id === this.equTreeData[i].list[j].id){
                currentDataItem = this.equTreeData[i].list[j]
              }
            }
          }
          if(Object.keys(currentDataItem).length > 0) {
            this.roleInfoItem = deepClone(currentDataItem)

            this.getEqtInfo((status,result) => {
              if(status) {
                // collectionType 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
                if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
                  this.equipmentStatusNow = '10'
                }else {
                  this.equipmentStatusNow = '20'
                }
                this.collectionType = result.collectionType
                this.equipmentOnType  = result.onType
                this.xmStatus = result.equipmentParams.xmStatus

                this.lightSource = result.collectionParams.lightSource
                this.equipmentParams = deepClone(result.equipmentParams)

                this.equipmentVoltage = result.equipmentParams.electricity && result.equipmentParams.electricity !== '' ? parseFloat(result.equipmentParams.electricity).toFixed(2) : 0

                this.startTime = result.collectionParams.startTime ? new Date(result.collectionParams.startTime) : ''
                this.interval = result.collectionParams.interval ? result.collectionParams.interval : 30
                this.cjTimes = result.collectionParams.frequency != 0 ? result.collectionParams.frequency : 1
                this.dsType = result.collectionParams.frequency == 0 ? '10' : '20'
                this.singleTimes = result.collectionParams.spectralTimes ? result.collectionParams.spectralTimes : '5' 

                //版本3.1只支持全休眠模式 3.0支持半休眠模式
                let recommendModel = ''
                if(this.roleInfoItem.version) {
                  if(this.roleInfoItem.version == '3.0') {
                    recommendModel = '03'
                  }else if(this.roleInfoItem.version == '3.1') {
                    recommendModel = '02'
                  }else {
                    recommendModel = '00'
                  }
                }
                
                this.workModel = result.equipmentParams.cjModel ? result.equipmentParams.cjModel : recommendModel
                if(this.workModel == '00') {
                  this.minInterval = 1
                }else {
                  this.minInterval = 10
                }
                if(this.collectionType == '7' && this.workModel == '03') {
                  this.realWorkModel = result.equipmentParams.lastCjModelStatus ? result.equipmentParams.lastCjModelStatus : ''
                }
                this.voltageUp = result.equipmentParams.voltageUp ? result.equipmentParams.voltageUp : 10
                this.voltageDown = result.equipmentParams.voltageDown ? result.equipmentParams.voltageDown : 9
                
                this.equipmentParamsBefore = deepClone(result)
              }else {
                this.cjRemark = ''
                this.btnClickType = 'dc'
              }
            })

          }else {
            this.roleInfoItem = {}
            this.equipmentParamsBefore = {}
          }
          // this.$nextTick(() => {
          //   this.$refs.equipmentOption_list.setChoiceRole(this.roleInfoItem)
          // })

          
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    roloeItemChoose(item) {
      if(item.level === 1) {
        return
      }
      this.roleInfoItem = {}
      this.btnClickType = ''
      this.equipmentVoltage = ''
      this.equipmentParamsBefore = {}
      this.$nextTick(() => {
        this.roleInfoItem = deepClone(item)
        this.getEqtInfo((status,result) => {
          if(status) {
            // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
            if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
              this.equipmentStatusNow = '10'
              if(result.collectionType == '7') {
                this.btnClickType = 'ds'
              }else if(result.collectionType == '3') {
                this.btnClickType = 'dc'
              }
            }else {
              this.equipmentStatusNow = '20'
              this.btnClickType = 'dc'
            }
  
            this.collectionType = result.collectionType
            this.equipmentOnType  = result.onType
  
            this.lightSource = result.collectionParams.lightSource
            this.equipmentParams = deepClone(result.equipmentParams)

            this.xmStatus = result.equipmentParams.xmStatus

            this.equipmentVoltage = result.equipmentParams.electricity && result.equipmentParams.electricity !== '' ? parseFloat(result.equipmentParams.electricity).toFixed(2) : 0
  
            this.startTime = result.collectionParams.startTime ? new Date(result.collectionParams.startTime) : ''
            this.interval = result.collectionParams.interval ? result.collectionParams.interval : 30
            this.cjTimes = result.collectionParams.frequency != 0 ? result.collectionParams.frequency : 1
            this.dsType = result.collectionParams.frequency == 0 ? '10' : '20'
            this.singleTimes = result.collectionParams.spectralTimes ? result.collectionParams.spectralTimes : '5' 
  
            //版本3.1只支持全休眠模式 3.0支持半休眠模式
            let recommendModel = ''
            if(this.roleInfoItem.version) {
              if(this.roleInfoItem.version == '3.0') {
                recommendModel = '03'
              }else if(this.roleInfoItem.version == '3.1') {
                recommendModel = '00'
              }else {
                recommendModel = '02'
              }
            }
            
            this.workModel = result.equipmentParams.cjModel ? result.equipmentParams.cjModel : recommendModel
            if(this.workModel == '00') {
              this.minInterval = 1
            }else {
              this.minInterval = 10
            }
            if(this.collectionType == '7' && this.workModel == '03') {
              this.realWorkModel = result.equipmentParams.lastCjModelStatus ? result.equipmentParams.lastCjModelStatus : ''
            }
            this.voltageUp = result.equipmentParams.voltageUp ? result.equipmentParams.voltageUp : 10
            this.voltageDown = result.equipmentParams.voltageDown ? result.equipmentParams.voltageDown : 9

            this.equipmentParamsBefore = deepClone(result)
          }else{
            this.cjRemark = ''
            this.btnClickType = 'dc'
          }
        })
      })
    },
    getEqtInfo(callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/getEqtInfo?snid=" + this.roleInfoItem.snid,
        method: "post",
        data: {}
      }).then(res => {
        if (res.data.code === 200) {
          if(res.data.result.code && res.data.result.code == 400) {
            this.$notify.error({
              title: '错误',
              message: res.data.result.message
            });
            this.equipmentStatusNow = '0'
            callback(false)
          }else {
            if(callback && typeof(callback) === 'function') {
              callback(true, res.data.result)
            }
          }
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    checkEqtStatus() {
      this.getEqtInfo((status,result) => {
        if(status) {
          // collectionType 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
          if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
            this.equipmentStatusNow = '10'
          }else {
            this.equipmentStatusNow = '20'
          }
          this.collectionType = result.collectionType
          this.equipmentOnType  = result.onType
          this.xmStatus = result.equipmentParams.xmStatus

          this.lightSource = result.collectionParams.lightSource
        }
      })
    },
    onOptionBtnClick(type) {
      if(this.equipmentStatusNow !== '20') {
        return
      }
      if(this.btnClickType !== type) {
        this.btnClickType = type
      }else {
        this.btnClickType = ''
      }
    },
    workModelChoose() {
      /* *
       * '02' > 全休眠模式
       * '01' > 半休眠模式
       * '00' > 全功率模式
       * '03' > 全自动模式
       */
      if(this.workModel == '00') {
        this.minInterval = 1
      }else if(this.workModel == '01' || this.workModel == '02' || this.workModel == '03') {
        if(this.interval < 10) {
          this.interval = 10
        }
        this.minInterval = 10
      }
    },
    changeFrequencyType(type) {
      if(this.btnClickType == 'ds') {
        this.dsType = type
        if(this.dsType == '20') {
          this.workModel = '00'
          this.minInterval = 1
        }
      }
    },
    doOption() {
      if(this.btnClickType && this.btnClickType !== '') {
          this.getEqtInfo((status,result) => {
            if(status) {
              // 1连续采集关，2连续采集开，3样品采集，4暗电流，5标准板，6定时关，7定时开
              let equipmentStatusNow = ''
              // 00 在线 10半休眠 20全休眠
              let xmStatus = result.equipmentParams.xmStatus && result.equipmentParams.xmStatus != '' ? result.equipmentParams.xmStatus : ''
              if(result.onType == '2') {
                this.$notify({
                  title: '警告',
                  message: '当前设备不在线，请稍后再试',
                  type: 'warning'
                });
                return
              }
              
              if(result.collectionType == '2' || result.collectionType == '3' || result.collectionType == '4' || result.collectionType == '5' || result.collectionType == '7') {
                equipmentStatusNow = '10'
              }else {
                equipmentStatusNow = '20'
              }
              if(equipmentStatusNow !== '20') {
                this.$notify({
                  title: '警告',
                  message: '当前设备正在采集，请刷新状态，稍后再试',
                  type: 'warning'
                });
                return
              }else {
                if(parseFloat(this.roleInfoItem.version) >= 3) {
                  if(xmStatus == '10') {
                    this.$notify({
                      title: '警告',
                      message: '当前设备正在休眠唤醒中，请稍后再试',
                      type: 'warning'
                    });
                    return
                  }else if(xmStatus == '20') {
                    this.$notify({
                      title: '警告',
                      message: '当前设备正在充电，请稍后再试',
                      type: 'warning'
                    });
                    return
                  }
                }
              }
              if(this.btnClickType == 'dc') {
                let confirmText = ''
                let msgJson = {
                  snid: this.roleInfoItem.snid,
                  type: this.btnClickType,
                  seconds: 2,//开灯时间  2.4以下版本设备使用
                  version: this.roleInfoItem.version,
                  remark: this.cjRemark,
                  cjModel: '00'
                }
                if(this.btnClickType == 'dc') {
                  confirmText = '样品采集'
                  msgJson.times = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                }else if(this.btnClickType == 'bzb') {
                  msgJson.dbTimes = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                  confirmText = '标准板定标'
                }else if(this.btnClickType == 'adl') {
                  msgJson.dbTimes = this.singleTimes && this.singleTimes !== '' && this.singleTimes !== 0 ? this.singleTimes : 5
                  confirmText = '暗电流定标'
                }
                this.$confirm('确认执行' + confirmText +'？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$fetch({
                    url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
                    method: "post",
                    data: msgJson
                  }).then(res => {
                    if (res.data.code === 200) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      });
                      this.cjRemark = ''
                      this.checkEqtStatus()
                    }else {
                      this.$notify.error({
                        title: '错误',
                        message: res.data.message
                      });
                    }
                  })
                })
              }else if(this.btnClickType == 'ds') {
                /* *
                 * '02' > 全休眠模式
                 * '01' > 半休眠模式
                 * '00' > 全功率模式
                 * '03' > 全自动模式
                 */
                let content = ''
                if(this.workModel == '00') {
                  content = "全功率模式即设备所有模块持续供电，需确保电量充足，是否确认执行全功率定时采集？"
                }else if(this.workModel == '01') {
                  content = "半休眠模式即设备在采集后进入部分模块休眠，以保证设备正常充电效率，休眠期间可人为唤醒，是否确认执行半休眠定时采集？"
                }else if(this.workModel == '02') {
                  content = "全休眠模式即设备在采集后所有模块进入休眠状态，直到下一次采集自动唤醒，休眠期间无法人为唤醒，是否确认执行全休眠定时采集？"
                }else if(this.workModel == '03') {
                  content = "全自动模式即设备根据电量自动匹配采集模式，以确保稳定充电，是否确认执行全自动定时采集？（推荐）"
                }
                this.$confirm(content, '确认执行定时采集？', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if(this.startTime === '') {
                    this.$notify({
                      title: '警告',
                      message: '请选择采集开始时间',
                      type: 'warning'
                    });
                    return
                  }
                  let nowTimes = parseInt(new Date().getTime() / 1000 / 60)
                  let chooseTimes = parseInt(new Date(this.startTime).getTime() / 1000 / 60)
                  if(chooseTimes < nowTimes) {
                    this.$notify.error({
                      title: '错误',
                      message: "定时采集时间不可早于当前时间"
                    });
                    return
                  }
                  if(this.workModel == '03' && this.voltageUp <= this.voltageDown) {
                    this.$notify({
                      title: '警告',
                      message: '阈值设定有误，请联络运维人员重新设置',
                      type: 'warning'
                    });
                    return
                  }
                
                  let msgJson = {
                    snid: this.roleInfoItem.snid,
                    type: 'ds',
                    seconds: 2,//开灯时间  2.4以下版本设备使用
                    version: this.roleInfoItem.version,
                    remark: this.cjRemark,
                    time: this.interval,
                    startTime: utils.formatDate('yyyy-MM-dd hh:mm:ss',new Date(this.startTime)),
                    times: this.singleTimes
                  }
                  msgJson.xmTime = parseInt(this.interval) - 5
                  if(this.dsType == '10') {
                    msgJson.count = 0
                    msgJson.cjModel = this.workModel
                  }else {
                    msgJson.count = this.cjTimes
                    msgJson.cjModel = '00'
                  }
                  if(this.workModel == '03') {
                    msgJson.voltageUp = this.voltageUp
                    msgJson.voltageDown = this.voltageDown
                  }
                  this.$fetch({
                    url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
                    method: "post",
                    data: msgJson
                  }).then(res => {
                    if (res.data.code === 200) {
                      this.$message({
                        message: '操作成功',
                        type: 'success'
                      });

                      this.checkEqtStatus()
                    }else {
                      this.$notify.error({
                        title: '错误',
                        message: res.data.message
                      });
                    }
                  })
                })
              }
            }
          })
      }else {
        this.$notify({
          title: '警告',
          message: '请选择采集控制项',
          type: 'warning'
        });
      }
    },
    stopDcOption() {
      this.$confirm('确认停止采集？如果设备正在采集会完成当前采集后自动停止', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let msgJson = {
          snid: this.roleInfoItem.snid,
          type: 'stop',
          version: this.roleInfoItem.version,
        }
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
          method: "post",
          data: msgJson
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });

            this.checkEqtStatus()
          }else {
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      })
    },
    stopDsOption() {
      this.$confirm('确认停止定时采集？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let msgJson = {
          snid: this.roleInfoItem.snid,
          type: 'timeStop',
          version: this.roleInfoItem.version,
        }
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/equipment/control?userName=" + localStorage.getItem("username"),
          method: "post",
          data: msgJson
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.cjRemark = ''
            this.checkEqtStatus()
          }else {
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      })
    },
    restoreDefault() {
      this.$confirm('是否确认恢复设备参数设置？', '确认恢复？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let result = this.equipmentParamsBefore
        this.singleTimes = result.collectionParams.spectralTimes ? result.collectionParams.spectralTimes : '5'
        this.cjRemark = ''
        this.startTime = result.collectionParams.startTime ? new Date(result.collectionParams.startTime) : ''
        this.interval = result.collectionParams.interval ? result.collectionParams.interval : 30
        this.cjTimes = result.collectionParams.frequency != 0 ? result.collectionParams.frequency : 1
        this.dsType = result.collectionParams.frequency == 0 ? '10' : '20'

        //版本3.1只支持全休眠模式 3.0支持半休眠模式
        let recommendModel = ''
        if(this.roleInfoItem.version) {
          if(this.roleInfoItem.version == '3.0') {
            recommendModel = '03'
          }else if(this.roleInfoItem.version == '3.1') {
            recommendModel = '02'
          }else {
            recommendModel = '00'
          }
        }
        
        this.workModel = result.equipmentParams.cjModel ? result.equipmentParams.cjModel : recommendModel
        if(this.workModel == '00') {
          this.minInterval = 1
        }else {
          this.minInterval = 10
        }
        if(this.collectionType == '7' && this.workModel == '03') {
          this.realWorkModel = result.equipmentParams.lastCjModelStatus ? result.equipmentParams.lastCjModelStatus : ''
        }
        this.voltageUp = result.equipmentParams.voltageUp ? result.equipmentParams.voltageUp : 10
        this.voltageDown = result.equipmentParams.voltageDown ? result.equipmentParams.voltageDown : 9
      })
    },
    checkEquipmentStatus() {
      // 检查设备通讯状态
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/infoBySid",
        method: "post",
        data: {
          snid: this.roleInfoItem.snid
        }
      }).then(res => {
        if(res.data.code == 200) {
          if(res.data.result.code && res.data.result.code == 400) {
            this.$notify.error({
              title: '通讯失败',
              message: ""
            });
            return
          }
          this.$message({
            message: '通讯成功',
            type: 'success'
          });
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    numberInputValueChange(res) {
      if(res.key == 'singleTimes') {
        this.singleTimes = res.value
      }else if(res.key == 'interval'){
        this.interval = res.value
      }else if(res.key == 'cjTimes'){
        this.cjTimes = res.value
      }else {
        this.equipmentParams[res.key] = res.value
      }
    },
    chartInit(data) {
      let echarts = require('echarts')
      if(data.value === 'dnValue') {
        if(this.$refs['dnChart']) {
          this.dnChart = echarts.init(this.$refs['dnChart'])
          this.dnChart.setOption({
            title: {
              text: 'DN值曲线',
              x:'28',
              y:'8',
              textStyle: {
                color: '#000',
                fontWeight: 'normal',
                fontSize: '18'
              }
            },
            color: ['#F28F9B'],
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '6%',
              bottom: '7%',
              top: '18%',
              height: '70%',
              right: '2%',
              show: true,
              // backgroundColor: '#002738'
              // containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#000',
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              boundaryGap: false,
              data: data.xData
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000'
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                    color: ['#DFEAFA']
                }
              },
              scale:true
            },
            series: [
              {
                name: data.name,
                type: 'line',
                stack: '总量',
                smooth: true,
                data: data.yData,
                // color: '#000',
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(248,208,137,0.3)'
                  }, {
                    offset: 1,
                    color: '#F8D089'
                  }])
                },
              }
            ]
          })
          this.$nextTick(() => {
            this.dnChart.resize()
          })
        }
        
      }else if(data.value === 'reflectivity') {
        this.reflectivityChart = echarts.init(this.$refs['reflectivityChart'])
        this.reflectivityChart.setOption({
          title: {
            text: '反射率曲线',
            x:'28',
            y:'8',
            textStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: '18'
            }
          },
          color: ['#9290FF'],
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            bottom: '7%',
            top: '18%',
            height: '70%',
            right: '2%',
            show: true,
            // backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#000',
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            boundaryGap: false,
            data: data.xData
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                  color: ['#DFEAFA']
              }
            },
            scale:true
          },
          series: [
            {
              name: data.name,
              type: 'line',
              stack: '总量',
              smooth: true,
              data: data.yData,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(162,203,250,0.3)'
                }, {
                  offset: 1,
                  color: '#A2CBFA'
                }])
              },
            }
          ]
        })
        this.$nextTick(() => {
          this.reflectivityChart.resize()
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.equipmentOption{
  background-color: #EAECF0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 8px 0 8px 12px; 
  // overflow-y: scroll;
  .equipmentOption_treeBg {
    height: 100%;
    background-color: white;
    border-radius: 6px;
    margin-right: 12px;
  }
  .equipmentOption_infoBg {
    height: 100%;
    box-sizing: border-box;
    flex: 1;
    padding-right: 12px;
    overflow-x: scroll;
  }
  .equipmentOption_info {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(228, 234, 236);
    flex: 1;
    min-width: 1360px;
    box-sizing: border-box;
    // background-color: white;
    // padding: 15px;
    .equipmentO_infoTitleBg {
      width: 100%;
      float: left;
      border-radius: 6px;
      // margin-top: 20px;
      padding-bottom: 10px;
      background-color: white;
      padding: 0 28px 10px;
      box-sizing: border-box;
      .equipmentO_infoTitle {
        font-size: 18px;
        float: left;
        height: 45px;
        line-height: 45px;
        width: 100%;
      }
      .equipmentO_infoContent {
        width: 100%;
        float: left;
        .equipmentO_infoItemBg {
          height: 20px;
          float: left;
          padding-left: 75px;
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          .equipmentO_infoItemIconShowName {
            width: 16px;
            height: 16px;
          }
          .equipmentO_infoItemIconName {
            width: 16px;
            height: 16px;
          }
          .equipmentO_infoItemIconSnid {
            width: 16px;
            height: 16px;
          }
          .equipmentO_infoItemText {
            font-size: 16px;
            color: #999;
            margin-left: 8px;
          }
        }
      }
      .equipmentO_delBtn {
        float: right;
      }
    }
    .equipmentO_optionArea {
      width: 100%;
      float: left;
      // height: 545px;
      padding: 10px 28px 30px;
      background-color: white;
      margin-top: 10px;
      border-radius: 6px;
      box-sizing: border-box;
      .equipmentO_optionTitle {
        font-size: 18px;
        float: left;
        height: 45px;
        line-height: 45px;
        width: 100%;
      }
      .equipmentO_optionBg {
        width: 100%;
        display: flex;
        .equipmentO_left {
          width: 32%;
          position: relative; 
          .equipmentOLeft_water {
            width: 100%;
            margin-top: 70px;
          }
          .equipmentOLeft_equipment {
            width: 310px;
            position: absolute;
            left: 50%;
            margin-left: -155px;
            top: 60px;
          }
          .equipmentOLeft_equipment_o {
            width: 310px;
            position: absolute;
            left: 50%;
            margin-left: -155px;
            top: 60px;
            animation:pf 2.5s 0s linear infinite;
          }
          @keyframes pf {
            0% {
              transform: translateY(0px);
              // transform: rotate(0deg);
            }
            25% {
              transform: translateY(-1.5px);
              // transform: rotate(1deg);
            }
            75% {
              transform: translateY(1.5px);
              // transform: rotate(-1deg);
            }
            100% {
              transform: translateY(0px);
              // transform: rotate(0deg);
            }
          }
          .equipmentOLeft_btnArea {
            width: 100%;
            height: 64px;
            position: absolute;
            box-sizing: border-box;
            padding: 0 30%;
            left: 0;
            bottom: 50px;
            .equipmentODoCollectionBtn_item {
              width: 50%;
              height: 100%;
              float: left;
              display: flex;
              justify-content: center;
              .equipmentODoCollectionBtn_start {
                height: 100%;
                width: 65px;
                background-size: 100% 100%;
                background-image: url('~@/assets/images/v4/eo_start.png');
                cursor: pointer;
              }
              .equipmentODoCollectionBtn_startUn {
                height: 100%;
                width: 65px;
                background-size: 100% 100%;
                background-image: url('~@/assets/images/v4/eo_start_o.png');
                cursor: not-allowed;
              }
              .equipmentODoCollectionBtn_stop {
                height: 100%;
                width: 65px;
                background-size: 100% 100%;
                background-image: url('~@/assets/images/v4/eo_stopen.png');
                cursor: not-allowed;
              }
              .equipmentODoCollectionBtn_canStop {
                height: 100%;
                width: 65px;
                background-size: 100% 100%;
                background-image: url('~@/assets/images/v4/eo_stopcan.png');
                cursor: pointer;
              }
            }
          }
        }
        .equipmentO_right {
          width: 68%;
          display: flex;
          flex-direction: column;
          .equipmentO_btnGroup {
            width: 100%;
            height: 70px;
            .equipmentO_btn {
              float: right;
              margin-left: 12px;
            }
          }
          .equipmentO_settingArea {
            width: 100%;
            padding: 20px 18px 20px 0;
            box-sizing: border-box;
            border: 1px solid #909090;
            border-radius: 10px;
            margin-bottom: 16px;
            display: flex;
            .equipmentO_settingItem {
              float: left;
              display: flex;
              height: 40px;
              align-items: center;
              display: 42px;
              .equipmentO_settingTitle {
                width: 105px;
                font-size: 18px;
                margin-left: 24px;
              }
            }
          }
          .equipmentO_paramArea {
            width: 100%;
            padding: 20px 18px 20px 24px; 
            box-sizing: border-box;
            border: 1px solid #909090;
            // float: left;
            flex: 1;
            border-radius: 10px;
            .equipmentO_paramTitle {
              float: left;
              font-size: 18px;
              width: 100%;
              display: flex;
              align-items: center;
              .equipmentOParams_refreshIcon {
                cursor: pointer;
                margin-left: 10px;
                font-size: 20px;
                color: #409EFF;
              }
            }
            .equipmentO_paramItemBg {
              width: 33.33%;
              float: left;
              .equipmentO_paramItemDouble {
                width: 100%;
                height: 120px;
                display: flex;
                float: left;
                // align-items: center;
                color: #666;
                box-sizing: border-box;
                padding: 12px 0;
                font-size: 15px;
                .equipmentO_paramName {
                  width: 105px;
                  line-height: 36px;
                }
                .equipmentO_paramInputNumber {
                  width: 130px;
                  .el-input{
                    width: 100%;
                  }
                }
                .equipmentO_paramInput {
                  width: 150px;
                  .el-input{
                    width: 100%;
                  }
                }
                .equipmentO_paramTimeInput {
                  width: 150px;
                  .el-input__inner{
                    width: 100%;
                    font-size: 13px;
                    padding: 0 5px;
                  }
                  .el-input__prefix {
                    display: none;
                  }
                }
              }
              .equipmentO_paramItem {
                width: 100%;
                height: 60px;
                display: flex;
                float: left;
                align-items: center;
                color: #666;
                font-size: 15px;
                .equipmentO_paramName {
                  width: 105px;
                }
                .equipmentO_paramInputNumber {
                  width: 130px;
                  .el-input{
                    width: 100%;
                  }
                }
                .equipmentO_paramInput {
                  width: 150px;
                  .el-input{
                    width: 100%;
                  }
                }
                .equipmentO_paramTimeInput {
                  width: 150px;
                  .el-input__inner{
                    width: 100%;
                    font-size: 13px;
                    padding: 0 10px;
                  }
                  .el-input__prefix {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
    .equipmentO_echartsArea {
      width: 100%;
      height: 400px;
      float: left;
      margin-top: 10px;
      .equipmentO_echartsDndataBg {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        float: left;
        padding-right: 5px;
        .equipmentO_echartsDndata {
          width: 100%;
          height: 100%;
          background: white;
          border-radius: 6px;
        }
      }
      .equipmentO_echartsReflectivityBg {
        box-sizing: border-box;
        width: 50%;
        height: 100%;
        float: left;
        padding-left: 5px;
        .equipmentO_echartsReflectivity {
          width: 100%;
          height: 100%;
          background: white;
          border-radius: 6px;
        }
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .equipmentOCollectionParams_title {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    box-sizing: border-box;
    background: linear-gradient(90deg,rgba(223,240,253,1), rgba(255,255,255,0));
    display: flex;
    align-items: center;
    .equipmentOCollectionParams_titleImg {
      width: 16px;
      height: 16px;
    }
    .equipmentOCollectionParams_titleText {
      line-height: 28px;
      font-size: 14px;
      color: #114ca6;
      margin-left: 6px;
    }
  }
}
.equipmentO_lockBtnPop {
  margin-top: 4px!important;
}
</style>
